<script setup>
import {FwbInput , FwbModal} from "flowbite-vue";
import AssignLicense from './AssignLicense.vue'
import {ref,reactive, onMounted} from "vue";
import $bus from '@/bus/index.js';
const props = defineProps({
  addCamera: Function,
  buyLicense: Function
})
const isShowModal = ref(false)
const closeModal = () => {
  isShowModal.value = false
  isBuyLicense.value = false
}
const showModal = () => {
  isShowModal.value = true
}
const vasIndex = ref(1);
defineExpose({
  showModal,
})
const isBuyLicense = ref(false)
onMounted(() => {
  // 接收数据
  $bus.on("assign", (msg) => {
    if(msg){
      isBuyLicense.value = true
    }
  });
})
</script>

<template>
  <fwb-modal v-if="isShowModal" @close="closeModal" size="md" id="CreateModal">
    <template #header>
      <div class="text-lg flex flex-col text-sm text-[#9CA3AF] font-[500] font-Medium" >
        <div class="">
          <p class="text-md">Your VA Library</p>
        </div>
        <div class="absolute w-full h-[1px] bg-[var(--theme-button-bg)] top-[111px] left-0 hidden s4k:block s4k:top-[79px]"></div>
      </div>
    </template>

    <template #body>
      <div class="absolute w-full h-[1px] bg-[var(--theme-button-bg)] top-[50px] left-0 s4k:hidden s2k:top-[60px]"></div>
      <div class="w-full mb-[47px] s2k:mb-0 flex flex-row">
        <div id="mainLeft" class="relative">
          <div class="flex flex-row items-center my-[16px]">
            <input type="text" id="input" class="ml-[16px]">
            <div class="w-[71px] h-[42px] bg-[var(--theme-button-bg)] rounded-[0_8px_8px_0] flex cursor-pointer">
              <span class="text-md text-white m-auto">Search</span>
            </div>
          </div>
          <div class="w-full h-[600px] border-t border-solid border-[var(--grid)] list overflow-x-hidden">
            <div class="w-full h-[64px] border-b border-solid border-[var(--grid)] flex flex-row items-center hover:bg-[var(--theme-hover)]" id="list"
                 v-for="v in 10" :key="v"
                 :class="vasIndex === v ? 'themeHover' : ''"
                 @click="vasIndex = v">
              <img src="@/assets/image/buyLicenses.png" alt="" class="w-[40px] h-[40px] mx-[16px]">
              <span class="text-[16px] text-[var(--theme-font-color)]">Crowd Analysis</span>
            </div>
          </div>
          <div class="w-full h-[75px] absolute bottom-0 left-0 flex flex-row items-center border-t border-solid border-[var(--grid)] cursor-pointer">
            <span class="text-[16px] text-[#3F83F8] ml-[16px] mr-[8px]">Search on Marketplace</span>
            <svg-icon name="share" width="20px" height="20px" class="s2ksvg s4ksvg"></svg-icon>
          </div>
        </div>
        <div id="mainRight">
          <div class="w-full h-[224px] flex flex-row items-center">
            <img src="@/assets/image/buyLicenses.png" alt="" class="w-[160px] h-[160px] m-[0_32px_0_24px] rounded-[12p] s4k:w-[120px] s4k:rounded-[12px]">
            <div class="flex flex-col h-[160px]">
              <div class="w-[600px] text-[24px] text-[var(--theme-font-color)]">Face Recognition</div>
              <div class="w-[600px] text-[16px] text-[var(--theme-font-desc-color)] mt-[5px]">Publisher name</div>
              <div class="w-[600px] text-[16px] text-[var(--theme-font-desc-color)] mt-[22px]">Face Recognition is a deep-learning based face recongition plugin, trained with 150,000+ datasets and OpenCV/NCNN API for all cameras.</div>
              <div class="w-[600px] text-[16px] text-[#3F83F8] flex flex-row mt-[22px]">
                <div class="flex flex-row items-center cursor-pointer">View Details<svg-icon name="share" width="20px" height="20px" class="s2ksvg s4ksvg ml-[4px]"></svg-icon></div>
                <div class="mx-[24px] cursor-pointer">Billing</div>
                <div class="flex flex-row items-center cursor-pointer">Report Abuse<svg-icon name="share" width="20px" height="20px" class="s2ksvg s4ksvg ml-[4px]"></svg-icon></div>
              </div>
            </div>
          </div>
          <div class="w-full h-[73px] border-b border-t border-solid border-[var(--grid)] flex flex-row items-center justify-between">
            <span class="text-[16px] text-[var(--theme-font-desc-color)] ml-[24px]">5 available licenses, 4/5 assigned</span>
            <div v-if="!isBuyLicense" class="flex flex-row justify-end items-center mr-[24px]">
              <div class="w-[145px] h-[41px] bg-[var(--theme-button-bg)] rounded-[8px] s4k:rounded-[8px] cursor-pointer flex justify-center items-center">
                <svg-icon name="buy" width="14px" height="14px" class="svgLogo s2ksvg s4ksvg"></svg-icon>
                <span class="text-[14px] text-white ml-[8px]">Buy License</span>
              </div>
              <div class="w-[147px] h-[41px] bg-[#1C64F2] rounded-[8px] s4k:rounded-[8px] cursor-pointer ml-[10px] flex justify-center items-center" @click="addCamera">
                <svg-icon name="add" width="14px" height="14px" class="svgLogo s2ksvg s4ksvg"></svg-icon>
                <span class="text-[14px] text-white ml-[8px]">Add Camera</span>
              </div>
            </div>
            <div v-else class="flex flex-row justify-end items-center mr-[24px]">
              <div class="w-[145px] h-[41px] bg-[#1C64F2] rounded-[8px] s4k:rounded-[8px] cursor-pointer flex justify-center items-center" @click="buyLicense">
                <svg-icon name="buy" width="14px" height="14px" class="svgLogo s2ksvg s4ksvg"></svg-icon>
                <span class="text-[14px] text-white ml-[8px]">Buy License</span>
              </div>
            </div>
          </div>
          <div class="w-full h-[50px] border-b border-t border-solid border-[var(--grid)] flex flex-row items-center">
            <span class="text-[16px] text-[var(--theme-font-desc-color)] ml-[24px]">ASSIGNED CAMERAS</span>
          </div>
          <div class="w-full h-[280px] list">
            <div class="flex flex-row justify-between items-center h-[69px] border-b border-solid border-[var(--grid)]" v-for="i in 5" :key="i">
              <div class="ml-[24px]">
                <p class="text-[16px] text-[var(--theme-font-color)]">Camera ID</p>
                <p class="text-md text-[var(--theme-font-desc-color)] mt-[4px]">Lv {{ i }}</p>
              </div>
              <div class="w-[105px] h-[41px] bg-[var(--theme)] flex flex-row justify-center items-center border border-solid border-[var(--grid)] mr-[24px] cursor-pointer rounded-[8px] s4k:rounded-[8px]">
                <svg-icon name="close" width="12px" height="12px" class="svgClass s2ksvg s4ksvg"></svg-icon>
                <span class="text-md text-[var(--theme-font-desc-color)] ml-[8px]">Remove</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </fwb-modal>
<!--  <div class="w-[100vw] h-[100vh] bg-[rgba(0,0,0,0.4)] absolute top-0 left-0"></div>-->
</template>

<style scoped lang="scss">
.list::-webkit-scrollbar {
  width: 2px;
}

#CreateModal {
  :deep(.max-w-md) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    max-width: 1200px;
    height: auto;

    button {
      cursor: pointer;

      &:hover {
        background: var(--theme);
      }

      svg {
        color: #6B7280;
      }
    }

    .bg-white {
      width: 100%;
      height: 100%;
      background-color: var(--theme);
    }
    .p-4 {
      padding-right: 0.4rem;
    }
    .p-6 {
      padding: 0;
      padding-top: 3px;
      height: 750px;
      #mainLeft{
        width: 325px;
        height: 750px;
      }
      #mainRight{
        width: calc(100% - 325px);
        height: 750px;
        border-left: var(--grid) solid 1px;
      }
    }
  }
}

#input {
  width: 210px;
  height: 40px;
  padding: 0;
  padding-left: 10px;
  font-size: 14px;
  color: #9CA3AF;
  background: var(--theme);
  border: solid 1px var(--grid);
  border-radius: 8px 0 0 8px;
  &:focus {
    outline: none;
    box-shadow: inset 0 0;
  }
}
@media screen and (min-width: 2560px) {
  .s2ksvg{
    transform: scale(1) !important;
  }
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(1.5);
      .p-4{
        padding: 0.8rem;
        padding-right: 0.4rem;
      }
    }
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg{
    transform: scale(1) !important;
  }
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(2);
      .p-4{
        padding: 0.6rem;
        padding-right: 0rem;
      }
    }
  }
}
</style>